<template>
  <div>
    <type1 v-if="this.type === 1" :pic="pic"
    @addSurvey='addSurvey' ref="son"></type1>
    <type2 v-else-if="this.type === 2" :pic="pic"
    @addSurvey='addSurvey' ref="son"></type2>
    <type3 v-else-if="this.type === 3" :pic="pic"
    @addSurvey='addSurvey' ref="son"></type3>
    <type4 v-else-if="this.type === 4" :pic="pic"
    @addSurvey='addSurvey' ref="son"></type4>
    <type5 v-else-if="this.type === 5" :pic="pic"
    @addSurvey='addSurvey' ref="son"></type5>
    <type6 v-else-if="this.type === 6" :pic="pic"
    @addSurvey='addSurvey' ref="son"></type6>
    <type7 v-else-if="this.type === 7" :pic="pic"
    @addSurvey='addSurvey' ref="son"></type7>
    <div class="setting">
      <svg class="icon" aria-hidden="true" @click="showCover1(cover1)">
        <use xlink:href="#icon-shezhi"></use>
      </svg>
    </div>
    <section class="cover" v-if="cover1">
      <div class="cancel" @click="hideCover1"></div>
      <div class="pop" ref="pop">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shezhi"></use>
        </svg>
        <li @click="isRandom(random)">
          <svg class="icon" aria-hidden="true"
          :class="[random ? 'active' : '']">
            <use xlink:href="#icon-suijibofang"></use>
          </svg>
          <span :class="[random ? 'active' : '']">随机选项顺序</span>
        </li>
        <li @click="isSkip(skip)">
          <svg class="icon" aria-hidden="true"
          :class="[skip ? 'active' : '']">
            <use xlink:href="#icon-zhixiang-qianjin"></use>
          </svg>
          <span :class="[skip ? 'active' : '']">答题人可以跳过这道题</span>          
        </li>
        <li @click="hideCover1(cover1)">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fanhui1"></use>
          </svg>
          <span>返回编辑</span>            
        </li>        
      </div>
    </section>
    <section class="cover" v-if="cover2">
      <div class="cancel" @click="hideCover2"></div>
      <div class="push" ref="push">
        <li>
          <div class="complete" @click="finish">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-crmtubiao71"></use>
            </svg>
          </div>
          <span>完成并发布</span>
        </li>
        <li>
          <div class="add" @click="addNew">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-untitled44"></use>
            </svg>
          </div>
          <span>再加一道题</span>
        </li>
      </div>
    </section>
  </div>
</template>

<script>

import type1 from './type1'             // 单选题
import type2 from './type2'             // 多选题
import type3 from './type3'             // 滑动题
import type4 from './type4'             // 定量题
import type5 from './type5'             // 排序题
import type6 from './type6'             // 选图题
import type7 from './type7'             // 填写题

export default {
  name: 'surveyIndex4',
  data () {
    return {
      cover1: false,
      random: false,
      skip: false,
      cover2: false,
      question: {}
    }
  },
  props: [
    'type',
    'pic'
  ],
  methods: {
    addSurvey (question) {
      this.question = question
    },                                // 添加一个题目
    isRandom () {
      this.random = !this.random
    },                                // 题目是否随机(未和题目中的数据绑定)
    isSkip () {
      this.skip = !this.skip
    },                                // 题目是否可以跳过(未和题目中的数据绑定)
    showCover1 () {
      this.cover1 = true
      setTimeout(() => {
        this.$refs.pop.className = 'pop active'
      }, 100)
    },                                // 显示选择随机和跳过选项
    hideCover1 () {
      this.$refs.pop.className = 'pop'
      setTimeout(() => {
        this.cover1 = false
      }, 300)
    },                                // 隐藏选择随机和跳过选项
    showCover2 () {
      this.cover2 = true
      setTimeout(() => {
        this.$refs.push.className = 'push active'
      }, 100)
    },                                // 显示选择发布还是再加一道题
    hideCover2 () {
      this.$refs.push.className = 'push'
      setTimeout(() => {
        this.cover2 = false
      }, 300)
    },                                // 隐藏选择发布还是再加一道题
    next () {
      if (this.$refs.son.trans()) {
        this.showCover2()
      } else {
        this.$store.dispatch('showTips', {
          show: true,
          message: '问题/选项为空'
        })
      }
    },                                // 下一步，进入选择发布还是再加一道题
    addNew () {
      this.$emit('addQuestion', this.question)
      this.$router.push({name: 'surveyIndex2'})
    },                                // 再加一道题
    finish () {
      this.$emit('addQuestion', this.question)
      this.$router.push({name: 'surveyIndex5'})
    }                                 // 选择发布
  },
  components: {
    type1,
    type2,
    type3,
    type4,
    type5,
    type6,
    type7
  }
}
</script>

<style lang="scss" scoped>
.setting {
  height: 150px;
  padding-bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon {
  width: 90px;
  height: 90px;
  color: #eee;
}
.cover {
  background-color: rgba(#000, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .pop,
  .push {
    box-sizing: border-box;
    height: 50vh;
    padding-top: 50px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s;
    transform: translateY(100%);
    &.active {
      transform: translateY(0);
    }
  }
  .push {
    background-color: rgba($color: #fff, $alpha: 0);
    background-image: url('/static/images/complete.png');
    background-size: cover;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    li {
      display: flex;
      flex-direction: column;
      transform: translateY(-30%);
      div {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;
        &.complete {
          background-color: #007500;
        }
        &.add {
          background-color: #000093;
        }
      }
      .icon {
        color: #fff;
        width: 80px;
        height: 80px;
      }
      span {
        color: #ccc;
      }
    }
  }
}
li {
  list-style: none;
  width: 500px;
  display: flex;
  align-items: center;
  margin-top: 50px;
  .icon {
    width: 40px;
    height: 40px;
    color: #999;
    &.active {
      color: #0082bf;
    }
  }
  span {
    font-size: 36px;
    padding-left: 20px;
    color: #999;
    &.active {
      color: #0082bf;
    }
  }
}
.cancel {
  height: 50vh;
}
</style>
